<template>
    <div>
        <el-menu :default-active="`${props.cid.value}`" class="chat-list">
            <el-menu-item v-for="i in props.chatlist.value" :index="`${i.id}`" @click="selectChat(i.id)">
                <el-icon>
                    <document />
                </el-icon>
                <!-- <div class="chat-title">{{ i.id }}</div> -->
                <div class="chat-title">上次提问:</div>
                <div class="chat-small-title">{{ i.message.length>=3?i.message[i.message.length-2].content:'无' }}</div>
            </el-menu-item>
            <el-menu-item index="1" @click="handleCreateChat">
                <el-icon>
                    <Plus />
                </el-icon>
                <span>创建新对话</span>
            </el-menu-item>
            <el-menu-item index="2" @click="handleRemoveChat">
                <el-icon>
                    <Failed />
                </el-icon>
                <span>删除当前对话</span>
            </el-menu-item>
            <el-menu-item index="3" @click="handleClearChat">
                <el-icon>
                    <Delete />
                </el-icon>
                <span>删除所有对话</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps(['addChat','clearMessage','chatlist','selectCurrentChat','removeChat','clearChat','cid'])

// 新建对话
const handleCreateChat = () => {
    props.addChat()
}

// 切换对话
const selectChat = (id) => {
    props.selectCurrentChat(id)
}

// 删除当前对话
const handleRemoveChat = () => {
    props.removeChat(props.cid.value)
}

// 删除所有对话
const handleClearChat = () => {
    props.clearChat()
    props.clearMessage()
}
</script>

<style scoped lang="scss">
.chat-list{
    overflow: hidden;
    width: 200px;
    position: absolute;
    height:80vh;
    .chat-title{
        font-size:12px;
    }
    .chat-small-title{
        font-size:14px;
    }
}
</style>